<script setup lang="ts" name="Recharge">
import API from "@/api";
import userinfo from "@/store/userinfo";

const { t } = useI18n();
const router = useRouter();
const piniaUserinfo: any = userinfo();
const global: any = getCurrentInstance()?.appContext.config.globalProperties;
const images = reactive({
  wallet: new URL("@/assets/images/Me/wallet.png", import.meta.url).href,
});

const moneyValidator = (val: number) => {
  if (!val) {
    return t("recharge.test16");
  } else if (
    val < currentchannelItem.value?.minMoney ||
    val > currentchannelItem.value?.maxMoney
  ) {
    return t("withdraw.test7")
      .replace("*", currentchannelItem.value?.minMoney)
      .replace("#", currentchannelItem.value?.maxMoney); //'请输入'+ currentchannelItem.value?.minMoney + ' - ' + currentchannelItem.value?.maxMoney + '的提款金额'
  } else {
    return true;
  }
};
const data: any = reactive({
  currentChannelId: 1,
  channelList: [
    {
      id: 1,
      investChannel: "INPAY",
      minMoney: 100,
      maxMoney: 20000,
    },
  ],
  widthTyps: [
    {
      title: computed(() => t("withdraw.test17")),
      value: 'Banktransfer',
    },
    {
      title: computed(() => "UPI"),
      value: 'UPI',
    },
    {
      title: computed(() => "PIX"),
      value: 'Pix',
    },
  ],
  activeType: '',
  withdrawForm: {
    payAmount: "",
    phone: "",
    account: "",
    name: "",
    ifsc: "",
    cpf: "",
  },
  isLoading: false,
});

const {
  channelList,
  widthTyps,
  activeType,
  currentChannelId,
  withdrawForm,
  isLoading,
} = toRefs(data);

const currentchannelItem = computed(() => {
  return channelList.value.find((it: any) => it?.id == currentChannelId.value);
});
const inputMoneyInterval = computed(() => {
  return (
    currentchannelItem.value?.minMoney +
    " - " +
    currentchannelItem.value?.maxMoney
  );
});

const goRecord = () => {
  router.push(`/me/withdraw/records`);
};
const addBankCard = () => {
  router.push(`/me/withdraw/addbankcard`);
};
const handleChannle = (item: any) => {
  currentChannelId.value = item.id;
};

const handleChangeType = (el: any, index: number) => {
  activeType.value = el.value;
};
const getChannelInfo = () => {
  API.drawListAPI({}).then((res:any) => {
      if (res?.code === 200) {
        channelList.value = res.data
        currentChannelId.value = channelList.value[0].id
      }
    });
}
getChannelInfo()
// 获取账户信息
const getDefaultUserBank = () => {
  API.goUserBank({}).then((res) => {
    if (res?.code === 200) {
      let data = res.data;
      console.log('data', data);
      withdrawForm.value = {
        ...data
      }
      let act = widthTyps.value.find((it: any) => {
        return it?.value == data?.transferMode;
      });
      activeType.value = act?.value || 'Banktransfer';
    }
  });
}
getDefaultUserBank();

const onSubmit = (values: any) => {
  let params = {
    transferMode: activeType.value,
    ...values,
  };
  isLoading.value = true;
  API.goPayDraw(params).then((res) => {
    if (res?.code === 200) {
      isLoading.value = false;
      global.message(t("withdraw.state3"));
      piniaUserinfo.queryUserMoney();
    }
  }).finally(() => {
    isLoading.value = false;
  });
};
</script>

<template>
  <div class="WithdrawPage">
    <DetailHeader :title="t('withdraw.title1')" :isNeedBackIcon="true" />
    <div class="channelContainer">
      <div
        class="channelItem"
        v-for="(item, index) in channelList"
        @click="handleChannle(item)"
        :class="{ active: currentChannelId == item.id }"
      >
        {{ item.drawChannel }}
      </div>
    </div>
    <BalanceBanner />
    <div class="rechargeChannel">
      <van-form @submit="onSubmit" label-align="top" :v-model="withdrawForm">
        <van-cell-group>
          <van-field
            v-model="withdrawForm.payAmount"
            class="myfield"
            type="number"
            name="payAmount"
            style="line-height: 36rem"
            required
            :rules="[{ validator: moneyValidator }]"
            :label="t('withdraw.title2')"
            :placeholder="inputMoneyInterval"
          />
          <div class="withTypes">
            <div class="title">{{ "选择提款方式" }}</div>
            <div class="amountList">
              <div
                v-for="(el, index) in widthTyps"
                @click="handleChangeType(el, index)"
                :class="{ active: activeType == el.value }"
                :key="index"
              >
                {{ el.title }}
              </div>
            </div>
          </div>
          <van-field
            v-model="withdrawForm.phone"
            required
            type="tel"
            style="line-height: 36rem"
            class="myTextArea"
            name="phone"
            :label="t('withdraw.test14')"
            :rules="[{ required: true, message: t('withdraw.test8') }]"
          />
          <van-field
            v-model="withdrawForm.account"
            required
            type="text"
            style="line-height: 36rem"
            class="myTextArea"
            name="account"
            :label="t('withdraw.test15')"
            :rules="[{ required: true, message: t('withdraw.test9') }]"
          />
          <van-field
            v-model="withdrawForm.name"
            required
            type="text"
            style="line-height: 36rem"
            class="myTextArea"
            name="name"
            :label="t('withdraw.test16')"
            :rules="[{ required: true, message: t('withdraw.test10') }]"
          />
          <van-field
            v-if="activeType === 'Banktransfer'"
            v-model="withdrawForm.ifsc"
            required
            type="text"
            style="line-height: 36rem"
            class="myTextArea"
            name="ifsc"
            label="IFSC"
            :rules="[{ required: true, message: t('withdraw.test11') }]"
          />
          <van-field
            v-if="activeType === 'Pix'"
            v-model="withdrawForm.cpf"
            required
            type="text"
            style="line-height: 36rem"
            class="myTextArea"
            name="cpf"
            label="CPF"
            :rules="[{ required: true, message: t('withdraw.test12') }]"
          />
        </van-cell-group>
        <div style="margin: 40rem 16rem 12rem 16rem">
          <van-button :loading="isLoading" round block type="primary" native-type="submit">
            {{ t("withdraw.btn1") }}
          </van-button>
        </div>
      </van-form>
      <!-- <div class="order" @click="goRecord">{{ t("withdraw.btn2") }} ></div> -->
      <!-- <div class="tips">
        温馨提示:<span>为方便个人取款，可在个人中心进行资料绑定</span>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
